<template>
    <div>
        <el-container class="common-layout">
            <el-main>
                <div class="divs">
                    <span class="title">
                        <el-icon>
                            <House />
                        </el-icon>
                        订单管理/<span style="color: #0098FF;">开单</span>
                    </span>
                </div>
                <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;基础信息</p>
                <el-form :model="form" label-width="auto" ref="refform" :rules="rules">
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="订单编号:" prop="ord_number">
                                    <el-input v-model="form.ord_number" placeholder="请输入内容" clearable readonly />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="客户名称:" prop="client_name">
                                    <el-select v-model="form.client_name" placeholder="请选择" style="width: 240px"
                                        @change="handleChange2">
                                        <el-option v-for="item in KHtableData" :key="item.value" :label="item.ct_name"
                                            :value="item.ct_name" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="客户编码:" prop="">
                                    <el-input v-model="bm" placeholder="请输入内容" clearable readonly />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="始发地:" prop="ord_startaddress">
                                    <el-cascader v-model="form.ord_startaddress" :options="Addressvalue" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="目的地:" prop="ord_destination">
                                    <el-cascader v-model="form.ord_destination" :options="Addressvalue" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="合同:">
                                    <el-select v-model="form.Cr_id" placeholder="请选择" style="width: 240px"
                                        @change="handleChange">
                                        <el-option v-for="item in Cr_cp_name" :key="item.value" :label="item.cr_cp_name"
                                            :value="item.cr_id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="运输类型:" prop="tran_type">
                                    <el-select v-model="form.tran_type" placeholder="请选择" style="width: 240px">
                                        <el-option v-for="item in YStabledata" :key="item.value"
                                            :label="item.dict_label" :value="item.dict_value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="货物类型:" prop="cg_type">
                                    <el-select v-model="form.cg_type" placeholder="请选择" style="width: 240px">
                                        <el-option v-for="item in Hwtype" :key="item.value" :label="item.dict_label"
                                            :value="item.dict_value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="订单来源:" prop="ord_source">
                                    <el-select v-model="form.ord_source" placeholder="请选择" style="width: 240px">
                                        <el-option v-for="item in DDtableData" :key="item.value"
                                            :label="item.dict_label" :value="item.dict_value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="下单时间:" prop="ord_time">
                                    <el-date-picker v-model="form.ord_time" type="datetime" placeholder="请选择时间"
                                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="grid-content ep-bg-purple">
                                    <div class="two">
                                        <span style="color: #fff;">发</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content ep-bg-purple">
                                    <div class="one">
                                        <span style="color:#fff">收</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="联系人" prop="shipments_Contactname">
                                    <el-input v-model="form.shipments_Contactname" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系人" prop="receiving_Contactname">
                                    <el-input v-model="form.receiving_Contactname" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="联系电话" prop="shipments_ContactPhone">
                                    <el-input v-model="form.shipments_ContactPhone" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系电话" prop="receiving_ContactPhone">
                                    <el-input v-model="form.receiving_ContactPhone" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="详细地址" prop="shipments_addres">
                                    <el-input v-model="form.shipments_addres" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="详细地址" prop="receiving_addres">
                                    <el-input v-model="form.receiving_addres" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="计划发货时间:" prop="shipping_time">
                                    <el-date-picker v-model="form.shipping_time" type="datetime" placeholder="请选择时间"
                                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="计划收货时间:" prop="receiving_time">
                                    <el-date-picker v-model="form.receiving_time" type="datetime" placeholder="请选择时间"
                                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;货物信息</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-button type="primary" style="margin-left: -300px;" @click="JumpAdd">添加</el-button>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-table :data="HWtableData">
                                    <el-table-column type="index" label="序号" width="100" />
                                    <el-table-column property="cg_id" label="货物id" width=""
                                        v-if="false"></el-table-column>
                                    <el-table-column property="cg_name" label="货物名称" />
                                    <el-table-column property="" label="数量">
                                        <template #default="scope">
                                            <el-input-number v-model="scope.row.num" class="mx-4" :min="1" :max="10"
                                                controls-position="right" @change="Count(scope.row.num)" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column property="cg_unit" label="单位" />
                                    <el-table-column property="cg_volume" label="体积(m³)" />
                                    <el-table-column property="cg_weight" label="重量(kg)" />
                                    <el-table-column label="操作">
                                        <template #default="scope">
                                            <el-button link type="primary" size="small"
                                                @click="Delete(scope.row.cg_id)">
                                                删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <span style="margin-left: -30px;">合计</span>
                                <sapn style="margin-left: 800px;">
                                    数量:{{ form.count }}&nbsp;&nbsp;总体积:{{ form.totalvolume }}m³&nbsp;&nbsp;总重量:{{
                    form.weight }}kg
                                </sapn>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;需求车辆</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="车型:" prop="car_type">
                                    <el-select v-model="form.car_type" placeholder="请选择" style="width: 240px">
                                        <el-option v-for="item in CXtableData" :key="item.value"
                                            :label="item.dict_label" :value="item.dict_value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="车长:" prop="car_long">
                                    <el-select v-model="form.car_long" placeholder="请选择" style="width: 240px">
                                        <el-option v-for="item in CCtableData" :key="item.value"
                                            :label="item.dict_label" :value="item.dict_value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="8">
                                <el-form-item label="用车数量:">
                                    <el-input v-model="name" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col> -->
                        </el-row>
                    </div>
                    <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;费用信息</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="计费方式:" prop="bill_method">
                                    <el-select v-model="form.bill_method" placeholder="请选择" style="width: 240px">
                                        <el-option v-for="item in Bill_methodtabledata" :key="item.value"
                                            :label="item.dict_label" :value="item.dict_value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="运输费:" prop="freight_costs">
                                    <el-input v-model.parseFloat="form.freight_costs" placeholder="请输入内容" clearable
                                        @input="num1" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="保险费:" prop="insurance">
                                    <el-input v-model.parseFloat="form.insurance" placeholder="请输入内容" clearable
                                        @input="num1" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="包装费:" prop="packag_fee">
                                    <el-input v-model.parseFloat="form.packag_fee" placeholder="请输入内容" clearable
                                        @input="num1" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="装卸费:" prop="handling_fee">
                                    <el-input v-model.parseFloat="form.handling_fee" placeholder="请输入内容" clearable
                                        @input="num1" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="中转费:" prop="transit_fees">
                                    <el-input v-model.parseFloat="form.transit_fees" placeholder="请输入内容" clearable
                                        @input="num1" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="燃油费:" prop="fuel_costs">
                                    <el-input v-model.parseFloat="form.fuel_costs" placeholder="请输入内容" clearable
                                        @input="num1" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="服务费:" prop="service_charge">
                                    <el-input v-model.parseFloat="form.service_charge" placeholder="请输入内容" clearable
                                        @input="num1" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="其他费用:" prop="other_fee">
                                    <el-input v-model.parseFloat="form.other_fee" placeholder="请输入内容" clearable
                                        @input="num1" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="费用合计:" prop="freight_count">
                                    <el-input v-model="form.freight_count" placeholder="请输入内容" clearable readonly />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;付款方式</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="现付:" prop="pay_as_you_go">
                                    <el-input v-model.parseFloat="form.pay_as_you_go" placeholder="请输入内容" clearable
                                        @input="num2" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="预付:" prop="prepayment">
                                    <el-input v-model.parseFloat="form.prepayment" placeholder="请输入内容" clearable
                                        @input="num2" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="到付:" prop="collect">
                                    <el-input v-model.parseFloat="form.collect" placeholder="请输入内容" clearable
                                        @input="num2" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="周期付:" prop="periodical_payment">
                                    <el-input v-model.parseFloat="form.periodical_payment" placeholder="请输入内容" clearable
                                        @input="num2" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="付费合计:" prop="pay_count">
                                    <el-input v-model="form.pay_count" placeholder="请输入内容" clearable readonly />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;其他信息</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="订单备注:" prop="ord_remark">
                                    <el-input v-model="form.ord_remark" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div style="height: 50px;"></div>
                    <div class="button">
                        <el-form-item>
                            <el-button @click="qx">取消</el-button>
                            <el-button type="primary" @click="Save">保存</el-button>
                        </el-form-item>
                    </div>

                    <el-dialog v-model="dialogTableVisible" title="" width="800">
                        <!-- <sapn style="margin-left: -700px;font-size: 20px;">货品信息</sapn> -->
                        <el-table :data="tableData" @selection-change="AddHW">
                            <el-table-column type="selection" width="55" />
                            <el-table-column property="cg_id" label="货物id" width="" v-if="false"></el-table-column>
                            <el-table-column property="cg_name" label="货物名称" width=""></el-table-column>
                            <el-table-column property="cg_unit" label="单位" width=""></el-table-column>
                            <el-table-column property="cg_length" label="长(m)" width=""></el-table-column>
                            <el-table-column property="cg_width" label="宽(m)" width=""></el-table-column>
                            <el-table-column property="cg_height" label="高(m)" width=""></el-table-column>
                            <el-table-column property="cg_volume" label="体积(m³)" width=""></el-table-column>
                            <el-table-column property="cg_weight" label="重量(kg)" width=""></el-table-column>
                            <el-table-column property="cg_value" label="价值(元)" width=""></el-table-column>
                        </el-table>
                        <el-button type="primary" style="margin-left: 650px;" @click="HWAdd">保存</el-button>
                    </el-dialog>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { onMounted, ref, reactive } from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { Phone, Plus } from '@element-plus/icons-vue';
import { Upload } from 'element-plus';
import { useRouter, useRoute } from "vue-router";
import $http from '@/axios/base.js';
import router from '@/router';
export default {
    setup() {
        let route = useRoute();
        let time = ref('');
        let Addressvalue = ref([]);   //起始地和目的地的值
        let Tran_manager = ref([]);  //运输方式
        let Cr_cp_name = ref([]);  //承运商下拉框
        let cname = ref(); // 承运商值
        let name = ref('');   //承运商联系人姓名
        let phone = ref('');   //承运商联系人手机号
        let Dv_phone = ref('');  //司机手机号
        let Vc_model = ref('');  //车型
        let Vc_length = ref('');  //车长
        let DV_tableData = ref([]);  //司机下拉框
        let Dv_cp = ref([]);  //车牌号id
        let ord_id = ref('');   //订单id
        let Cargotabledata = ref([]);//货物信息
        let cg_num = ref(0);   //货物数量的和
        let cg_volume = ref(0);   //总体积
        let cg_weight = ref(0);   //总重量
        let Bill_methodtabledata = ref([]);  //计费方式下拉框
        let dialogTableVisible = ref(false);  //模态框的初始状态
        let tableData = ref([]);   //货物表信息
        let HWtableData = ref([]);  //页面显示储存的值
        let tableData2 = ref([]);  //存储勾选的值 
        let num = ref(0);  // 数量
        let KHtableData = ref([]);  //客户表数据
        let YStabledata = ref([]);  //运输类型下拉框
        let Hwtype = ref([]);  //货物类型
        let DDtableData = ref([]);  //订单来源
        let CXtableData = ref([]);  //车型
        let CCtableData = ref([]);  //车长
        let bm = ref('');  //客户编码
        let refform = ref(null);   //判断空值

        onMounted(() => {
            ord_id.value = route.query.id;
            Address();
            Wb_numberShow();
            showtype();
            ShowCY();
            Cargoshow();
            // sum();
            Jftype();
            KHshow();
        })

        function KHshow() {  //客户信息
            $http.get(`http://localhost:5261/api/Order/GetCustomer_Ments`).then((res) => {
                KHtableData.value = res;
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function Count(value) {  //计算数量
            form.count = HWtableData.value.reduce((acc, item) => {
                return acc + (typeof item.num === 'number' ? item.num : 0);
            }, 0);
            Count2(value)
        }

        function AddHW(value) {  //将选中的值放入tableData2
            tableData2.value = value;
        }

        function HWAdd() {   //将tableData2中的值存入tableData中显示并计算相关数据
            addToHWtableData();
            dialogTableVisible.value = false;
            Count2();
        }

        function Count2(value) {  //计算总体积和重量
            form.totalvolume = HWtableData.value.reduce((num, item) => {   //总体积
                return num + (parseFloat(item.cg_volume*value) || 0)
            }, 0);
            form.weight = HWtableData.value.reduce((num, item) => {   //总重量
                return num + (parseFloat(item.cg_weight*value) || 0)
            }, 0);
        }

        function addToHWtableData() {
            // 过滤掉可能已经存在于 HWtableData 中的项，避免重复
            const newItems = tableData2.value.filter(item => !HWtableData.value.includes(item));

            // 添加新项到 HWtableData
            HWtableData.value = [...HWtableData.value, ...newItems];
        }

        let form = reactive({   //订单类
            // ord_id: null, // 订单id
            ord_number: null, // 订单单号
            ord_startaddress: null, // 始发地
            ord_destination: null, // 目的地
            client_name: null, // 客户名称
            ord_state: 9, // 订单状态（0:待调度/待接单  1:已调度/已接单）
            shipments_Contactname: null, // 发货联系人姓名
            shipments_ContactPhone: null, // 发货联系人电话
            shipments_addres: null, // 发货地址
            receiving_Contactname: null, // 收货联系人姓名
            receiving_ContactPhone: null, // 收货联系人电话
            receiving_addres: null, // 收货地址
            shipping_time: null, // 预计发货时间
            receiving_time: null, // 预计收货时间
            ord_type: null, // 订单类型
            ord_source: null, // 订单来源
            ord_remark: null, // 订单备注
            ord_time: null, // 下单时间
            create_time: new Date(), // 创建时间
            create_by: sessionStorage.getItem("empname"), // 创建人
            lastUpdate_time: null, // 最后更新时间
            lastUpdate_by: null, // 最后更新人
            del_flag: null, // 删除标志
            tran_type: null, // 运输类型
            count: 0, // 总数量
            totalvolume: 0, // 总体积
            cg_name: null, // 货物名称
            bill_method: null, // 计费方式
            weight: 0, // 总重量
            freight_costs: 0, // 运费成本
            packag_fee: 0, // 包装费
            handling_fee: 0, // 装卸费
            other_fee: 0, // 其他费用
            freight_count: null, // 运费合计
            pay_as_you_go: 0, // 现付
            prepayment: 0, // 预付
            collect: 0, // 到付
            periodical_payment: 0, // 周期付
            pay_count: null, // 付费合计
            carrier_name: null, // 承运商名称
            carrier_contact_name: null, // 承运商联系人名称
            carrier_phone: null, // 承运商联系人手机号
            driver_name: null, // 司机姓名
            driver_phone: null, // 司机手机号
            car_type: null, // 车型
            car_long: null, // 车长
            car_number: null, // 车牌号
            receivables_state: null, // 应收单-结算状态
            audit_status: null, // 审核状态（0：待审核 1：已审核）
            cg_type: null, // 货物类型
            dis_mode: null, // 配送方式
            vc_model: null, // 车型
            vc_length: null, // 车长
            take_orders_time: null, // 取订单时间
            insurance: 0, // 保险费
            transit_fees: 0, // 中转费
            fuel_costs: 0, // 燃油费
            service_charge: 0 // 服务费
        })

        const rules = reactive({
            ord_number: [
                { required: true, message: '订单单号不能为空', trigger: 'blur' }
            ],
            ord_startaddress: [
                { required: true, message: '始发地不能为空', trigger: 'blur' }
            ],
            ord_destination: [
                { required: true, message: '目的地不能为空', trigger: 'blur' }
            ],
            client_name: [
                { required: true, message: '客户名称不能为空', trigger: 'blur' }
            ],
            shipments_Contactname: [
                { required: true, message: '发货联系人姓名不能为空', trigger: 'blur' }
            ],
            shipments_ContactPhone: [
                { required: true, message: '发货联系人电话不能为空', trigger: 'blur' }
            ],
            shipments_addres: [
                { required: true, message: '发货地址不能为空', trigger: 'blur' }
            ],
            receiving_Contactname: [
                { required: true, message: '收货联系人姓名不能为空', trigger: 'blur' }
            ],
            receiving_ContactPhone: [
                { required: true, message: '收货联系人电话不能为空', trigger: 'blur' }
            ],
            receiving_addres: [
                { required: true, message: '收货地址不能为空', trigger: 'blur' }
            ],
            shipping_time: [
                { required: true, message: '预计发货时间不能为空', trigger: 'blur' }
            ],
            receiving_time: [
                { required: true, message: '预计收货时间不能为空', trigger: 'blur' }
            ],
            ord_type: [
                { required: true, message: '订单类型不能为空', trigger: 'blur' }
            ],
            ord_source: [
                { required: true, message: '订单来源不能为空', trigger: 'blur' }
            ],
            ord_time: [
                { required: true, message: '下单时间不能为空', trigger: 'blur' }
            ],
            create_time: [
                { required: false, message: '创建时间不需要用户输入', trigger: 'blur' }
            ],
            create_by: [
                { required: false, message: '创建人不需要用户输入', trigger: 'blur' }
            ],
            lastUpdate_time: [
                { required: false, message: '最后更新时间不需要用户输入', trigger: 'blur' }
            ],
            lastUpdate_by: [
                { required: false, message: '最后更新人不需要用户输入', trigger: 'blur' }
            ],
            del_flag: [
                { required: false, message: '删除标志不需要用户输入', trigger: 'blur' }
            ],
            tran_type: [
                { required: true, message: '运输类型不能为空', trigger: 'blur' }
            ],
            count: [
                { required: true, message: '总数量不能为空', trigger: 'blur' }
            ],
            totalvolume: [
                { required: true, message: '总体积不能为空', trigger: 'blur' }
            ],
            cg_name: [
                { required: true, message: '货物名称不能为空', trigger: 'blur' }
            ],
            bill_method: [
                { required: true, message: '计费方式不能为空', trigger: 'blur' }
            ],
            weight: [
                { required: true, message: '总重量不能为空', trigger: 'blur' }
            ],
            freight_costs: [
                { required: true, message: '运费成本不能为空', trigger: 'blur' }
            ],
            packag_fee: [
                { required: true, message: '包装费不能为空', trigger: 'blur' }
            ],
            handling_fee: [
                { required: true, message: '装卸费不能为空', trigger: 'blur' }
            ],
            other_fee: [
                { required: true, message: '其他费用不能为空', trigger: 'blur' }
            ],
            freight_count: [
                { required: true, message: '运费合计不能为空', trigger: 'blur' }
            ],
            pay_as_you_go: [
                { required: true, message: '现付不能为空', trigger: 'blur' }
            ],
            prepayment: [
                { required: true, message: '预付不能为空', trigger: 'blur' }
            ],
            collect: [
                { required: true, message: '到付不能为空', trigger: 'blur' }
            ],
            periodical_payment: [
                { required: true, message: '周期付不能为空', trigger: 'blur' }
            ],
            pay_count: [
                { required: true, message: '付费合计不能为空', trigger: 'blur' }
            ],
            carrier_name: [
                { required: true, message: '承运商名称不能为空', trigger: 'blur' }
            ],
            carrier_contact_name: [
                { required: true, message: '承运商联系人名称不能为空', trigger: 'blur' }
            ],
            carrier_phone: [
                { required: true, message: '承运商联系人手机号不能为空', trigger: 'blur' }
            ],
            driver_name: [
                { required: true, message: '司机姓名不能为空', trigger: 'blur' }
            ],
            driver_phone: [
                { required: true, message: '司机手机号不能为空', trigger: 'blur' }
            ],
            car_type: [
                { required: true, message: '车型不能为空', trigger: 'blur' }
            ],
            car_long: [
                { required: true, message: '车长不能为空', trigger: 'blur' }
            ],
            car_number: [
                { required: true, message: '车牌号不能为空', trigger: 'blur' }
            ],
            receivables_state: [
                { required: true, message: '应收单-结算状态不能为空', trigger: 'blur' }
            ],
            audit_status: [
                { required: true, message: '审核状态不能为空', trigger: 'blur' }
            ],
            cg_type: [
                { required: true, message: '货物类型不能为空', trigger: 'blur' }
            ],
            dis_mode: [
                { required: true, message: '配送方式不能为空', trigger: 'blur' }
            ],
            vc_model: [
                { required: true, message: '车型不能为空', trigger: 'blur' }
            ],
            vc_length: [
                { required: true, message: '车长不能为空', trigger: 'blur' }
            ],
            take_orders_time: [
                { required: true, message: '取订单时间不能为空', trigger: 'blur' }
            ],
            insurance: [
                { required: true, message: '保险费不能为空', trigger: 'blur' }
            ],
            transit_fees: [
                { required: true, message: '中转费不能为空', trigger: 'blur' }
            ],
            fuel_costs: [
                { required: true, message: '燃油费不能为空', trigger: 'blur' }
            ],
            service_charge: [
                { required: true, message: '服务费不能为空', trigger: 'blur' }
            ]
        });

        let form2 = reactive({  //订单货物类
            // Order_goodsid: null, // 订单货物ID
            Ord_id: null, // 订单ID
            Cg_id: null, // 货物ID
            Ord_num: 1, // 订单数量
            Cg_num: null, // 货物数量
            Ord_startaddress: '', // 始发地
            Ord_destination: '', // 目的地
            Ord_number: '', // 订单编号
            Tran_manager: '' // 运输方式
        })

        function handleChange2(value) {   //根据客户名称查询编码
            $http.get(`http://localhost:5261/api/Order/customer_Ments_name/${value}`).then((res) => {
                bm.value = res[0].ct_numbering;
            }).catch((err) => {
                console.log("错误:" + err)
            })
        }

        function show() {  //货物表信息查询
            $http.get(`http://localhost:5261/api/Order/GetCargo_Ments`).then((res) => {
                tableData.value = res;
                console.log(tableData.value);
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function Save() {  //保存
            refform.value.validate((valid) => {
                if (valid) {
                    form.ord_startaddress = form.ord_startaddress[0] + "/" + form.ord_startaddress[1] + "/" + form.ord_startaddress[2];
                    form.ord_destination = form.ord_destination[0] + "/" + form.ord_destination[1] + "/" + form.ord_destination[2];
                    $http.post(`http://localhost:5261/api/Order/Add2`, form).then((res) => {
                        if (res) {
                            Max_number();
                            Addgodd();
                        } else {
                            ElMessage.warning('订单添加失败!');
                        }
                    }).catch((err) => {
                        console.log("订单错误:" + err);
                    })
                } else {
                    ElMessage.warning("请填写完整数据!");
                }
            })

        }

        function Max_number() {  //修改编号表的最大数量
            $http.get(`http://localhost:5261/api/BH/GetBH?prefix=DD`).then((res) => {
                console.log(res)
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function Addgodd() {   //添加订单货物表
            $http.get(`http://localhost:5261/api/Order/GetOrders_number/${form.ord_number}`).then((res) => { //根据订单编号查询订单id
                HWtableData.value.forEach(item => {
                    form2.Cg_id = item.cg_id;
                    form2.Ord_id = res[0].ord_id;
                    form2.Cg_num = form.count;
                    form2.Ord_startaddress = form.ord_startaddress;
                    form2.Ord_destination = form.ord_destination;
                    form2.Ord_number = form.ord_number;
                    form2.Tran_manager = form.tran_type;
                    $http.post(`http://localhost:5261/api/Order/GetOrders_number`, form2).then((res) => {  //添加订单货物表
                        if (res) {
                            router.push('/DDGL');
                        } else {
                            ElMessage.warning('订单货物添加失败!');
                        }
                    }).catch((err) => {
                        console.log("订单货物错误:" + err);
                    })
                });
                ElMessage.success('添加成功!');
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function Address() {   //始发地和目的地的绑定值
            axios.get("http://localhost:5261/api/Children/GetChildrens").then((res) => {
                Addressvalue.value = res.data;
                console.log(Addressvalue.value);
            }).catch((err) => {
                console.log("错误：" + err);
            })
        }

        function Wb_numberShow() {   //订单号的生成
            $http.get(`http://localhost:5261/api/BH/BHGZ?prefix=DD`).then((res) => {
                form.ord_number = res;
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function showtype() {   //下拉框值
            $http.get("http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_Datas?type=Tran_type").then((res) => {
                YStabledata.value = res;
            }).catch((err) => {
                console.log("错误:" + err);
            })
            $http.get("http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_Datas?type=Cg_type").then((res) => {
                Hwtype.value = res;
            }).catch((err) => {
                console.log("错误:" + err);
            })
            $http.get("http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_Datas?type=Ord_source").then((res) => {
                DDtableData.value = res;
            }).catch((err) => {
                console.log("错误:" + err);
            })
            $http.get("http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_Datas?type=Vc_length").then((res) => {
                CCtableData.value = res;
            }).catch((err) => {
                console.log("错误:" + err);
            })
            $http.get("http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_Datas?type=vc_model").then((res) => {
                CXtableData.value = res;
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function ShowCY() {   //承运商下拉框
            $http.get(`http://localhost:5261/api/Order/GetCarrier_Ments`).then((res) => {
                Cr_cp_name.value = res;
                console.log(res)
            }).catch((err) => {
                console.log("错误:" + err)
            })
        }

        function handleChange(value) {   //根据承运商填写联系人相关信息
            $http.get(`http://localhost:5261/api/Carrier_ment/GetCarrier_Ments_Update?Cr_id=${value}`).then((res) => {
                name.value = res[0].cr_name;
                phone.value = res[0].cr_phone;
                form.Dv_id = '';
                Dv_phone.value = '';
                form.Vc_id = '';
                Vc_length.value = '';
                Vc_model.value = '';
                Dv_cp.value = '';
                $http.get(`http://localhost:5261/api/Order/GetDrivers_Ments/${value}`).then((res) => {
                    DV_tableData.value = res;
                }).catch((err) => {
                    console.log("错误:" + err);
                })
            })
        }

        function vc_cp(value) {   //查询车型和车长
            //alert(value)
            const selectedItem = Dv_cp.value.find(item => item.vc_id === value);
            $http.get(`http://localhost:5261/api/Order/Get_Dict_Datas/${selectedItem.vc_model},${selectedItem.vc_length}`).then((res) => {
                Vc_model.value = res[0].dict_label;
                Vc_length.value = res[1].dict_label;
            }).catch((err) => {
                console.log("错误:" + err)
            })
        }

        function Cargoshow() {  //查询货物
            $http.get(`http://localhost:5261/api/Order/GetOrder_Cargos/${ord_id.value}`).then((res) => {
                Cargotabledata.value = res;
                console.log(Cargotabledata.value);
                cg_num.value = Cargotabledata.value.reduce((num, item) => {   //总数量
                    return num + (parseFloat(item.cg_num) || 0)
                }, 0);
                cg_volume.value = Cargotabledata.value.reduce((num, item) => {   //总体积
                    return num + (parseFloat(item.cg_volume) || 0)
                }, 0);
                cg_weight.value = Cargotabledata.value.reduce((num, item) => {   //总重量
                    return num + (parseFloat(item.cg_weight) || 0)
                }, 0);
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function qx() {   //取消
            router.push('/DDGL');
        }

        function Jftype() {   //查询计费方式
            $http.get(`http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_Datas?type=Bill_method`).then((res) => {
                Bill_methodtabledata.value = res;
            }).catch((err) => {
                console.log("错误:" + err)
            })
        }

        function num1() {   //计算费用
            form.freight_count = (parseFloat(form.freight_costs) + parseFloat(form.packag_fee) + parseFloat(form.handling_fee) +
                parseFloat(form.other_fee) + parseFloat(form.insurance) + parseFloat(form.transit_fees) + parseFloat(form.fuel_costs) + parseFloat(form.service_charge)).toFixed(2);
        }

        function JumpAdd() {   //跳转货物信息界面
            dialogTableVisible.value = true;
            show();
        }

        function Delete(id) {  //删除选中货物
            let index = HWtableData.value.findIndex(item => item.cg_id === id);
            if (index >= 0) {
                HWtableData.value.splice(index, 1);
                Count();
                Count2();
            }
        }

        function num2() {   //计算付费合计
            if (!isNaN(form.pay_as_you_go) && !isNaN(form.prepayment) && !isNaN(form.collect) && !isNaN(form.periodical_payment)) {
                form.pay_count = (parseFloat(form.pay_as_you_go) + parseFloat(form.prepayment) + parseFloat(form.collect) + parseFloat(form.periodical_payment)).toFixed(2)
            } else {
                form.pay_count = 0;
            }

        }

        return {
            form,
            time,
            Save,
            cname,
            Address,
            Addressvalue,
            Tran_manager,
            Cr_cp_name,
            handleChange,
            name,
            phone,
            Dv_phone,
            Vc_model,
            Vc_length,
            DV_tableData,
            Dv_cp,
            vc_cp,
            Cargotabledata,
            cg_num,
            qx,
            cg_volume,
            cg_weight,
            Bill_methodtabledata,
            num1,
            dialogTableVisible,
            JumpAdd,
            tableData,
            show,
            AddHW,
            HWAdd,
            HWtableData,
            tableData2,
            num,
            Count,
            Delete,
            KHtableData,
            YStabledata,
            Hwtype,
            DDtableData,
            CXtableData,
            CCtableData,
            num2,
            handleChange2,
            bm,
            form2,
            refform,
            rules
        }

    }
}
</script>

<style scoped>
.one {
    width: 40px;
    height: 40px;
    background-color: #2ED477;
    font-size: 25px;
    border-radius: 4px;
    margin-left: 30px;
}

.two {
    width: 40px;
    height: 40px;
    background-color: #FF9138;
    font-size: 25px;
    border-radius: 4px;
    margin-left: 30px;
}

.three {
    margin-left: 1em;
}

.common-layout {
    /* box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5); */
    background-color: #F5F9FF;
    height: 700px;
    width: 1250px;
    margin: auto;
    padding: auto;
    /* margin: 50px; */
    /* display: flex;
    align-items: center; */
}

.title {
    padding-right: 1065px;
    padding-top: 20px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    /* background-color: aqua; */
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 100px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.button {
    padding-right: 37px;
    margin-top: 20px;
    height: 50px;
    position: fixed;
    /* 固定位置 */
    top: auto;
    /* 距离顶部20像素 */
    right: 70px;
    /* 距离右侧20像素 */
    bottom: 20px;
    /* 底部自动 */
    left: auto;
    /* 左侧自动 */
    z-index: 1000;
    /* 确保它在其他内容之上 */

}
</style>